<!--/**
* Author: ganqz
* Date: 2022-07-27 20:41
* Desc: GoodDetail
*/
-->
<template>
  <yy-page class="page-goodsDetail goodsDetail" :has-slot="true">
    <!-- <view class="flex-1"> -->
    <view class="pageBgColor flex-1 overflow-auto pb160">
      <ad-swipe :img-list="info.image" v-if="info.image && info.image.length" />
      <!-- #ifdef MP-WEIXIN || H5 -->
      <follow-public ref="followPublic"></follow-public>
      <invite-user color="#333" background="#fff" ref="inviteUser" custom-class="bb" v-if="showUser" />
      <!-- #endif -->
      <goods-content :info="info" @share="openInite" />
      <goods-contain v-if="info.type === '5'" :info="info" />
      <goods-desc v-if="!!info.type" :type="info.type" :details="info.details" :tutorial-url="info.tutorialUrl" />
    </view>
    <view class="footer-main" slot="footer">
      <footer-btn :disabled="stockDisabled" :info="info" @share="openInite" @pop="openShare" @click="goPay" only-btn :btn-txt="stockDisabled ? '商品库存不足' : '立即抢购'" />
    </view>
    <share-popup v-model="showShare" v-if="showShare" @click="goFriend" />

    <invite-pop v-if="showInvite" v-model="showInvite" :obj="shareParams"></invite-pop>
  </yy-page>
</template>
<script>
  import AdSwipe from './components/AdSwipe'
  import GoodsContent from './components/GoodsContent'
  import GoodsDesc from './components/GoodsDesc'
  import FooterBtn from './components/FooterBtn'
  import GoodsContain from './components/GoodsContain'
  import SharePopup from '@/components/SharePopup/index.vue'
  import InvitePop from '@/pages/friends/components/InvitePop.vue'
  // #ifdef MP-WEIXIN || H5
  import FollowPublic from '@/components/FollowPublic/index.vue'
  // #endif
  import InviteUser from '@/components/InviteUser'
  import { locSharePosterInfo } from '@/utils/locStore/data'
  import { mapGetters } from 'vuex'
  import { navigateTo } from '@/utils/tools'
  import sharePage from '@/mixins/sharePage'
  export default {
    name: 'goods-detail',
    components: {
      SharePopup,
      AdSwipe,
      // #ifdef MP-WEIXIN || H5
      FollowPublic,
      // #endif
      GoodsContent,
      InvitePop,
      InviteUser,
      GoodsDesc,
      FooterBtn,
      GoodsContain
    },
    mixins: [sharePage],
    data() {
      return {
        shareInfo: {},
        showShare: false,
        showInvite: false,
        mallCommodityId: '',
        info: {
          label: [],
          image: [],
          package: [],
          type: ''
        },
        commission: ''
      }
    },
    computed: {
      ...mapGetters(['userInfo', 'showUser']),
      stockDisabled() {
        let stock = this.info.stock
        if (stock === undefined) {
          return false
        }
        stock = this.$utils.isNaNStr(stock)
        return stock <= 0
      },
      shareParams() {
        return {
          type: this.info.mallType === '1' ? 'coupon' : 'normal', //1电影券,2商品
          id: this.info.mallCommodityId,
          name: this.info.name
        }
      }
    },
    onLoad(option) {
      // option.mallCommodityId && this.$auth.getShareQuery(option)
      if (option.mallCommodityId) {
        this.mallCommodityId = option.mallCommodityId
      } else {
        this.$auth.getShareQuery(option)
        const shareInfo = locSharePosterInfo.get()
        this.mallCommodityId = shareInfo.mallCommodityId
      }
    },
    onShow() {
      this.init()
    },
    methods: {
      // 初始化方法
      init() {
        this.getCommodityInfo()
        this.$nextTick(() => {
          this.$refs.followPublic && this.$refs.followPublic.init()
        })
        if (this.showUser) {
          this.$nextTick(() => {
            this.$refs.inviteUser.init()
          })
        }
      },
      getCommodityInfo() {
        const mallCommodityId = this.mallCommodityId
        this.$msg.loading()
        uni.$api.mall.getCommodityInfo({ mallCommodityId }).then((res) => {
          this.info = res
          this.$msg.hideLoading()
        })
      },
      openShare() {
        this.showShare = true
      },
      openInite() {
        this.showInvite = true
      },
      goFriend() {
        navigateTo('/pages/friends/index', this.shareParams)
      },
      goPay() {
        //  判断是否登录
        if (this.$auth.getIslogin()) {
          const info = this.info
          const query = {
            mallCommodityId: info.mallCommodityId
          }
          this.$tools.navigateTo('/pagesOrder/goodsPay/index', query)
        } else {
          this.$tools.navigateTo(`/pages/login/index`)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .goodsDetail {
    height: 100%;
    position: relative;
    box-sizing: border-box;
    .content {
      height: 100%;
      position: relative;
    }
  }
  .footer-main {
    background: #fff;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  }
</style>
